<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				background-color: red;
				/* margin-bottom: 10px; */
			}
			.box2{
				background-color: pink;
				 
				 	/* margin-top: 10px; */
			}
			
			.box1 p{
				 
				background-color: blue;
			
			 
			}
			.box2 p{
				 
				background-color: yellow;
			 
			}
			
			.wall{
				clear: both;
				height: 10px;
			}
			p{
				float: left;
			}
		</style>
	</head>
	<body>
		<!-- 
		1.清除浮动的第三种方式
		 隔墙法
		 
		 2.外墙法
		 在两个盒子中间添加一个额外的块级元素
		 给额外添加的块级元素 设置clear:both属性
		 
		 外墙法可以让第二个盒子可以使用margin-top
		 但是外墙法不可以让第一个盒子使用margin-bottom属性
		 我们通常使用我们添加的块级元素高度来设置距离
		 
		 3.内墙法
		 在第一个盒子中所有子元素最后添加一个块级元素
		 给额外添加的块级元素 设置clear:both属性
		 
		 注意点:
		 内墙法可以第一个盒子可以使用margin-bottom
		 第二个盒子可以使用margin-top
		 也可以设置高度来设置盒子一和盒子二的距离
		 
		 
		 
		 4.外墙法和内墙法的区别
		 外墙法不能撑起第一个盒子的高度,内墙法可以撑起第一个盒子的高度.
		 
		 
		 5.在企业开发中 不常用隔墙法来清除浮动 
		 
		 
		 -->
		
		
		<div class="box1">
			<p>我是文字1</p>
			<p>我是文字1</p>
			<p>我是文字1</p>
			
			<div class="wall"></div>
		</div>
		
		<!-- <div class="wall"></div> -->
		
		<div class="box2">
			<p>我是文字2</p>
			<p>我是文字2</p>
			<p>我是文字2</p>
		</div>
		
		
	</body>
</html>